<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        .btn-container {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 400px;
        }

        .btn-container button {
            width: 100px;
            height: 40px;
            color: #fff;
            border: none;
            outline: none;
            margin: 0 20px;
        }

        .show-btn {
            background-color: #4169e1;
        }

        .hide-btn {
            background-color: #5f9ea0;
        }

        .drawer-container {
            position: fixed;
            left: 0;
            right: 0;
            bottom: -300px;
            background-color: #999999;
            height: 300px;
            color: #fff;
            transition: all 0.5s linear;
        }

        .title {
            text-align: center;
            padding: 20px;
        }

        .folder-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 240px;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: #333333;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 20px;
        }

        .show {
            bottom: 0;
        }
    </style>

</head>

<body>
    <div id="app">
        <div class="btn-container">
            <button class="show-btn" v-on:click="showDrawer">显示</button>
            <button class="hide-btn" v-on:click="hideDrawer">隐藏</button>
        </div>

        <div :class="drawerClass">
            <p class="title">抽屉</p>
            <div class="folder-container">
                <div class="item">文件夹1</div>
                <div class="item">文件夹2</div>
                <div class="item">文件夹3</div>
            </div>
        </div>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, reactive } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const drawerClass = ref(['drawer-container'])
                const showDrawer = () => {
                    drawerClass.value.push('show')
                }
                const hideDrawer = () => {
                    drawerClass.value = drawerClass.value.filter(item => item !== 'show')
                }
                return {
                    drawerClass,
                    showDrawer,
                    hideDrawer

                }
            }
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>